<!DOCTYPE html>
<html lang="en" xmlns:th="http://www.thymeleaf.org">
<head>
    <th:block th:include="include :: header('住户基本信息')" />
    <style>
        h5{
            width: 160px;
            display: inline;
        }
        .form-select{
            width: 100px;
            display: inline;
        }
        .container{
            margin-bottom: 100px;
        }
        #update{
            margin-right: 530px;
        }
        .operation{
            border-style: none;
            border-radius: 5px;
            cursor: pointer;
        }
        img{
            width: 24px;
            height: 24px;
            border-radius: 5px;
            cursor: pointer;
        }
        .operation:hover{
            box-shadow: 0 5px 5px 0 rgba(0, 0, 0, .25);
            transition: all .2s ease-in-out;
        }
    </style>
</head>
<body>
<h3 class="text-center">住户基本信息</h3><br/>
<div class="container">
   <div class="text-center" >
       <a class="btn btn-info" id="add" href="/sys/user/add" target="_top">新增</a>
       <a class="btn btn-success" id="update">更新</a>
       <h5>楼号</h5>&nbsp;&nbsp;
       <select class="form-select" aria-label="Default select example" id="buildingNo">
           <option selected>全部</option>
           <option value="1">1号</option>
           <option value="2">2号</option>
           <option value="3">3号</option>
       </select>&nbsp;&nbsp;
       <h5>房号</h5>&nbsp;&nbsp;
       <select class="form-select" aria-label="Default select example" id="roomNo">
           <option selected>全部</option>
           <option value="1">0101</option>
           <option value="2">0102</option>
           <option value="3">0201</option>
           <option value="3">0202</option>
           <option value="3">0301</option>
           <option value="3">0302</option>
           <option value="3">0401</option>
           <option value="3">0402</option>
           <option value="3">0501</option>
           <option value="3">0502</option>
           <option value="3">0601</option>
           <option value="3">0602</option>
           <option value="3">0701</option>
           <option value="3">0702</option>
       </select>&nbsp;&nbsp;
       <button type="button" class="btn btn-primary" onclick="clickConfirm()">确认</button>
       <button type="button" class="btn btn-danger" onclick="clickReset()">重置</button>

   </div><br/>

    <table class="table table-hover align-middle">
        <thead style="background-color: azure">
        <tr>
            <th scope="col">楼号</th>
            <th scope="col">房号</th>
            <th scope="col">面积</th>
            <th scope="col">户主名</th>
            <th scope="col">联系方式</th>
            <th scope="col">性别</th>
            <th scope="col">工作</th>
            <th scope="col">家庭人数</th>
            <th scope="col">物业费用(月)</th>
            <th scope="col">维修基金余额</th>
            <th scope="col">搬入日期</th>
            <th scope="col" style="text-align: center">操作</th>
        </tr>
        </thead>
        <tbody id="tbody">
        <tr th:each="resident:${residentInfo}">
            <td th:text="${resident.getBuildingNo().trim()}"></td>
            <td th:text="${resident.getRoomNo().trim()}"></td>
            <td th:text="${resident.getArea().trim()}"></td>
            <td th:text="${resident.getHostname().trim()}"></td>
            <td th:text="${resident.getTele().trim()}"></td>
            <td th:text="${resident.getSex().trim()}"></td>
            <td th:text="${resident.getWork().trim()}"></td>
            <td th:text="${resident.getFamilyNum().trim()}"></td>
            <td th:text="${resident.getPropertyFee().trim()}"></td>
            <td th:text="${resident.getBalance().trim()}"></td>
            <td th:text="${resident.getCheckinDate()}"></td>
            <td>
                <button class="operation" th:onclick="'javascript:clickUpdate('+${resident.getNumberID()}+');'">
                    <img th:src="@{/img/update.png}"/>
                </button>
                &nbsp;&nbsp;&nbsp;
                <button class="operation" th:onclick="'javascript:clickDelete('+${resident.getNumberID()}+');'">
                    <img th:src="@{/img/delete.png}">
                </button>
            </td>
        </tr>
        </tbody>
    </table>

</div>
<script th:src="@{/js/jquery.min.js}"></script>
<script th:src="@{/ajax/libs/layer/layer.min.js}"></script>
<!--<script th:src="@{/ajax/libs/layer/layer.min.js}"/>-->
<script>
    /**
     * 页面楼号房号初始化
     */
    $(function () {
        $.get("/queryInfo/residentInfo/buildingNoAndRoomNo",function (data){
            let buildingNo = data.buildingNo;
            let roomNo = data.roomNo;
            $("#buildingNo").empty();//清空下拉框
            let  buildingNoSelect = "<option selected>全部</option>";
            $("#buildingNo").append(buildingNoSelect);
            $.each(buildingNo,function (i) {
                buildingNoSelect = "<option>"+buildingNo[i].trim()+"</option>"
                $("#buildingNo").append(buildingNoSelect);
            })
            $("#roomNo").empty();//清空下拉框
            let  roomNoSelect = "<option selected>全部</option>";
            $("#roomNo").append(roomNoSelect);
            $.each(roomNo,function (i) {
                roomNoSelect = "<option>"+roomNo[i].trim()+"</option>"
                $("#roomNo").append(roomNoSelect);
            })
        })
    })

    /**
     * 点击确认按钮
     */
    clickConfirm = function (){
        $.get("/queryInfo/residentInfo/condition",
            {
                buildingNo:$("#buildingNo option:selected").text(),
                roomNo:$("#roomNo option:selected").text(),
            },
            function (data,status){
                $("#tbody").empty();//清空表格
                $.each(data,function (i) {
                    let  tbody = "<tr><td>"+data[i].buildingNo.trim()+"</td>"
                                 +"<td>"+data[i].roomNo.trim()+"</td>"
                                 +"<td>"+data[i].area.trim()+"</td>"
                                 +"<td>"+data[i].hostname.trim()+"</td>"
                                 +"<td>"+data[i].tele.trim()+"</td>"
                                 +"<td>"+data[i].sex.trim()+"</td>"
                                 +"<td>"+data[i].work.trim()+"</td>"
                                 +"<td>"+data[i].familyNum.trim()+"</td>"
                                 +"<td>"+data[i].propertyFee.trim()+"</td>"
                                 +"<td>"+data[i].balance.trim()+"</td>"
                                 +"<td>"+data[i].checkinDate+"</td>"
                                 +"<td><button class=\"operation\" onclick=\"clickUpdate("+data[i].numberID+")\"><img src=\"/img/update.png\"/></button>&nbsp;&nbsp;&nbsp;<button class=\"operation\" onclick=\"clickDelete("+data[i].numberID+")\"><img src=\"/img/delete.png\"></button></td></tr>";

                    $("#tbody").append(tbody);
                })
            })
        $(".btn-primary").blur()
    }

    /**
     * 重置按钮
     */
    clickReset = function (){
        location.reload()
    }
    /**
     * 更新按钮
     * @param data
     */
    clickUpdate = function (data){
        window.parent.location.href="/sys/user/update?id="+data;
        // alert('update---->'+data)
    }

    /**
     * 删除按钮
     * @param data
     */
    clickDelete = function (data){
        layer.confirm('您确认要删除该用户信息吗?', {icon: 0, title:'系统提示'}, function(index){
            console.log(data)
            layer.close(index);
            $.get("/sys/user/delete",
                {
                    id:data
                },
                function (data){
                    if(data==="success"){
                        layer.alert('删除成功', {icon: 6}),function (){
                            clickReset();
                        };

                    }else {
                        layer.alert('删除失败', {icon: 2});
                    }
            })
            // layer.close(index);
        });
    }
</script>
</body>
</html>